<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>旋转立方体</title>
	<style>
		div{
			width: 300px;
			height: 300px;
			position: absolute;
			top:0;
			left: 0;
			font-size: 60px;
			color: white;
			text-align: center;
			line-height: 300px;
		}
		html,body{
			perspective: 900px;
		}
		.box{
			width: 300px;
			height: 300px;
			margin:300px auto;
			position: relative;
			transition: all 2s;
			transform: rotateY(-45deg) rotateX(-45deg) rotateZ(-45deg);
			transform-style: preserve-3d;
		}
		html,body:hover .box{
			transform:rotateY(360deg) rotateX(360deg) rotateZ(360deg);
		}
		.box .up{
			transform-origin: top;
			transform: rotateX(90deg);
			background-color: red;
		}
		.box .down{
			transform-origin: bottom;
			transform: rotateX(-90deg);
			background-color: green;
		}
		.box .left{
			transform-origin: left;
			transform: rotateY(-90deg);
			background-color: blue;
		}
		.box .right{
			transform-origin: right;
			transform: rotateY(90deg);
			background-color: yellow;
		}
		.box .forward{
			transform: translateZ(300px);
			background-color: skyblue;
		}
		.box .backward{
			background-color: purple;
		}
	</style>
</head>
<body>
	<div class="box">
		<div class="up">上</div>
		<div class="down">下</div>
		<div class="left">左</div>
		<div class="right">右</div>
		<div class="forward">前</div>
		<div class="backward">后</div>
	</div>
</body>
</html>